<!-- 登陆 -->
<template>
  <div class="loginPage">
    <div class="loginCard">
      <div class="left"></div>
      <div class="right">
        <div class="logo"></div>
        <div class="title">南通市城市桥梁健康监测系统</div>
        <el-input placeholder="请输入用户名" v-model="loginForm.username">
          <div slot="prefix" class="un"></div>
        </el-input>
        <el-input
          placeholder="请输入密码"
          v-model="loginForm.password"
          show-password
        >
          <div slot="prefix" class="un up"></div>
        </el-input>
        <el-checkbox v-model="checkbox_remember_me" class="remember">记住我</el-checkbox>
        <el-button type="primary" @click="login" class="login">登录</el-button>
        <!-- <div class="word">技术支持：广西飞熊科技有限公司</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import { getCookie, setCookie } from "@/config/cookie.js";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      checkbox_remember_me: false,
    };
  },
  watch: {
    loginForm: function (loginForm) {
      // 监听用户名 -- 用户名为空,密码为空
      if (loginForm.username == "") {
        this.loginForm.password = "";
      }
    },
  },
  created() {
    // this.getloginPageConfig();
    // 在页面加载时从cookie获取登录信息
    let account = getCookie("account");
    let password = this.uncompileStr(getCookie("password")) ;
    let remenberMe = getCookie("checkbox_remember_me");
    // 如果存在赋值给表单，并且将记住密码勾选
    if (remenberMe) {
      this.loginForm.username = account;
      this.loginForm.password = password;
      this.checkbox_remember_me = true;
    }
  },
  mounted() {
    localStorage.setItem("app-key","FB")
  },
  methods: {
    login() {
      // console.log(this.loginForm);
      // this.$router.push("/");
      //登录
      const userInfo = {
        username: this.loginForm.username,
        password: md5(this.loginForm.password),
      }
      this.$api.login
        .login(userInfo)
        .then((res) => {
          if (res.data.success) {
            let loginInfo = res.data.data || {};
            loginInfo.userid = loginInfo.userId;
            localStorage.setItem("userInfo", JSON.stringify(loginInfo));
            // sessionStorage.setItem("loginInfo", JSON.stringify(res.data.data)); //用于集成页面获取userId
            this.$vs.notify({ text: "登录成功！", color: "success" });
            localStorage.setItem("token", res.data.token);
            // this.$router.push("/");
            this.$api.login
              .userView()
              .then((res) => {
                if (res.status == 200) {

                  // console.log(res.data.data, "2222");
                  if (res.data.data[0].deptResponses) {
                    localStorage.setItem(
                      "ownId",
                      res.data.data[0].deptResponses[0].code
                    );
                    localStorage.setItem(
                      "ownInfo",
                      JSON.stringify(res.data.data[0].deptResponses)
                    );
                  } else {
                    this.$vs.notify({
                      text: `当前用户未绑定桥梁！`,
                      color: "danger",
                    });
                  }
                  //获取第一个菜单
                  let menuData = JSON.stringify(res.data.data).replace(
                    /children/g,
                    "submenu"
                  );
                  menuData = menuData.replace(/funcIcon/g, "icon");
                  menuData = menuData.replace(/accessPath/g, "url");
                  localStorage.setItem("viewData", menuData);
                  menuData = JSON.parse(menuData);
                  let  bridgeIdList = []
                  res.data.data.forEach(item=>{
                    bridgeIdList.push(item.deptResponses[0].code)
                  })
                  let params = {bridgeIdList}
                  // console.log(params,'niubi')
                this.$api.login.loginDate(bridgeIdList).then(res=>{
                    // console.log(res)
                    if(res.data.success)
                    this.$router.push(`/`);
                  })
                }
              })
              .catch((res) => {
                // console.log(res)
                if(res.data.code == 500)
                this.$vs.notify({ text: "该账号未配置视图", color: "danger" });
              });

            // 记住密码,存储登录信息
            this.setUserInfo();
            /// 获取用户下的厂站
            // this.getCompnay();
            // 获取视图
            // this.userView();
          } else {
            this.getNum();
            this.$vs.notify({ text: `${res.data.message}`, color: "danger" });
          }
        })
        .catch((e) => {
          // this.account = "";
          // this.password = "";
          // this.verifyCode = "";
          // if (!code) {
          //   this.loginMessage = "";
          //   // console.log('123',e)
          //   // this.$vs.notify({ text: `${e.data.message}`, color: "danger" });
          // } else {
          //   this.loginMessage = "当前用户未扫码";
          // }
        });
    },
    // 储存表单信息
    setUserInfo() {
      // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
      // 如果没有勾选，储存的信息为空
      if (this.checkbox_remember_me) {
        setCookie("account", this.loginForm.username);
        setCookie("checkbox_remember_me", this.checkbox_remember_me);
        setCookie("password", this.compileStr(this.loginForm.password) );
      } else {
        setCookie("account", "");
        setCookie("password", "");
        setCookie("checkbox_remember_me", "");
      }
    },
    // 加密
    compileStr(code) {
      //对字符串进行加密
      var c = String.fromCharCode(code.charCodeAt(0) + code.length);
      for (var i = 1; i < code.length; i++) {
        c += String.fromCharCode(code.charCodeAt(i) + code.charCodeAt(i - 1));
      }
      return escape(c);
    },
    // 解密
    uncompileStr(code) {
      code = unescape(code);
      var c = String.fromCharCode(code.charCodeAt(0) - code.length);
      for (var i = 1; i < code.length; i++) {
        c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1));
      }
      return c;
    },

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/baseColor.scss";
.loginPage {
  width: 100%;
  height: 100vh;
  /* background-color: #000; */
  background-image: url("../../../public/imgs/loginBg.png");
  background-size: 100%;
  position: relative;
}

.loginCard {
  width: 55%;
  height: 60%;
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  min-width: 600px;
  min-height: 300px;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.left {
  width: 55%;
  float: left;
  height: 100%;
  background-image: url("../../../public/imgs/loginBg2.png");
  background-size: 100% 100%;
}

.right {
  float: left;
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.logo {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(50, 123, 220, 0.2);
  border-radius: 10px;
  height: 5vw;
  width: 5vw;
  background-image: url("../../assets/images/logo/logo.png");
  background-size: 100% 100%;
}

.title {
  /* font-size:1.8rem; */
  font-size: 1.3vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  margin-top: 3.2vh;
  margin-bottom: 1vh;
}

/deep/.el-input {
  width: 65%;
  min-width: 200px;
  /* height: 45px; */
  margin-top: 2vh;
}
/deep/.el-input__inner {
  padding-left: 37.5px;
  height: 45px;
}
/deep/.un {
  width: 25px;
  height: 25px;
  background-image: url("../../../public/imgs/un.png");
  margin-top: 7.5px;
}
.up {
  background-image: url("../../../public/imgs/up.png");
}
.remember {
  width: 65%;
  margin-top: 2vh;
}
.login {
  width: 65%;
  min-width: 200px;
  height: 48px;
  background: rgba(50, 123, 220, 1);
  box-shadow: 0px 0px 20px 0px rgba(50, 123, 220, 0.2);
  border-radius: 2px;
  margin-top: 2vh;
  margin-bottom: 8vh;
}
.word {
  width: 100%;
  height: 18px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 18px;
  text-align: center;
  position: absolute;
  bottom: 2vh;
  left: 0;
}
.title {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .img {
    background: url("../../assets/images/logo/logo.png");
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px 0px rgba(50, 123, 220, 0.2);
    border-radius: 10px;
  }
  .text {
    font-size: 22px;
    color: #444;
    margin-top: 20px;
  }
}
.bottomText {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 30px;
}
</style>
